<template>
    <div class="layout" :class="{'layout-hide-text': spanLeft < 4}">
        <Row type="flex">
            <Col :span="spanLeft" class="layout-menu-left">
            <Menu active-name="1" theme="dark" width="auto">
                <div class="layout-logo-left" :class="{'toggle':logoToggle}">                  
                  <img v-if="userInfo.headImage" :src="userInfo.headImage?getFastUrl+userInfo.headImage:''" alt="">
                  <img v-else-if="!userInfo.headImage && userInfo.sex=='女'" :src="defaulFemale" alt="">
                  <img v-else-if="!userInfo.headImage && userInfo.sex=='男'" :src="defaulMale" alt="">
                <p class="layout-text">{{userInfo.userName}}</p>
                <p class="layout-text">{{userInfo.departmentName}}</p>
                </div>
                <MenuItem name="1"  @click.native="$router.push({path:'/'})">
                <Icon type="ios-home" :size="iconSize"></Icon>
                <span class="layout-text">首页</span>
                </MenuItem>
                <MenuItem :name="item.functionId" :key="item.functionId" v-for="(item,index) in menuList" v-if="item.childList.length==0"  @click.native=$router.push({path:item.funtionUrl})>
                <Icon :type="item.icon"></Icon>
                <span class="layout-text">{{item.functionName}}</span>
                </MenuItem>
                <Submenu :name="item.functionId" :key="item.functionId" v-else>
                    <template slot="title">
                        <Icon :type="item.icon"></Icon>
                        <span class="layout-text">{{item.functionName}}</span>
                    </template>
                    <MenuItem :name="list.functionId" :key="list.functionId" v-for="list in item.childList" @click.native="$router.push({path:list.funtionUrl})">
                    <Icon :type="list.icon"></Icon>
                    <span class="layout-text">{{list.functionName}}</span>
                    </MenuItem>               
                </Submenu>                
            </Menu>
            </Col>
            <Col :span="spanRight">
            <div class="layout-header">
                <Row>
                    <Col span="12">
                        <h1>企想人力核算管理系统</h1>
                    </Col>
                    <Col span="10" class="text-right" @click.native="loginOut()">
                        <Icon type="power" class="exit"></Icon>
                    </Col>
                </Row>
            </div>
             <router-view></router-view>
            <div class="layout-copy" style="background:#fff;">
                2017-2018 &copy; bizideal shanghai 
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
  mounted() {},
  data() {
    return {
      spanLeft: 4,
      spanRight: 20,
      logoToggle: false,
      userInfo:this.$store.state.account.userInfo,
      getFastUrl: localStorage.getItem("fastUrl"),
      defaulFemale:require("../assets/images/headphoto_default_pic_female.png"),
      defaulMale:require("../assets/images/headphoto_default_pic_male.png")
    };
  },
  computed: {
    iconSize() {
      return this.spanLeft === 4 ? 14 : 24;
    },
    menuList() {
      return this.$store.state.account.navList;
      
    },
   
  },
  methods: {
    loginOut() {
      this.$Modal.confirm({
        title: "警告",
        content:'确定要退出吗？',
        onOk: () => {
          // 退出接口
          this.$ajax
            .post("/api/login/info/loginOut")
            .then(response => {
              //console.log(response.data)
              if (response.data.code == 1) {
                this.$router.push({ path: "/login" });
                this.$store.commit("LOGOUT");
                this.$Message.success(response.data.msg);
              }
            })
            .catch(error => {
              this.$Modal.error({
                content: error
              });
            });
        }
      });
    },
    aaa(index) {
      alert(index);
    }
  }
};
</script>